/* 数据库管理页面 */
<template>
  <zero-container>

    <div slot="tool">
      <el-button v-if="$hasPermission(mixinViewModuleOptions.addUrl)"
                 type="primary"
                 @click="initDialog('addUpdateDialogRef')"
                 size="small">新增</el-button>
      <el-button v-if="$hasPermission(mixinViewModuleOptions.deleteUrl)"
                 type="danger"
                 @click="deleteHandle()"
                 :disabled="batchBtnDisabled"
                 size="small">批量删除</el-button>

      <el-button v-if="$hasPermission(generatorCodeUrl)"
                 type="success"
                 @click="initDialog('generatorCodeFromRef')"
                 size="small">代码生成</el-button>
      <el-button-group style="float: right;">
        <el-dropdown trigger="click"
                     :hide-on-click="false">
          <el-button title="列"
                     icon="fa fa-th"
                     class="zero-column-dropdown"
                     size="small" />
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item key="all"
                              label="all">
              <el-checkbox key="all"
                           v-model="cloumn_all_checked"
                           v-on:click.stop.native
                           label="all"
                           @change="cloumnAllChecked">全选</el-checkbox>
            </el-dropdown-item>
            <hr />
            <el-checkbox-group v-model="checkedTableColumns">
              <el-dropdown-item v-for="(column,i) in showColumns"
                                :key="i"
                                :label="i">
                <el-checkbox :key="i"
                             :label="i">{{ column.label }}</el-checkbox>
              </el-dropdown-item>
            </el-checkbox-group>
          </el-dropdown-menu>
        </el-dropdown>
      </el-button-group>
    </div>
    <!-- 右边信息-start -->
    <div slot="main"
         style="height: 100%">
      <el-table :ref="ref"
                border
                height="100%"
                :data="dataList"
                @selection-change="dataListSelectionChangeHandle"
                @sort-change="dataListSortChangeHandle"
                style="width: 100%">
        <el-table-column type="selection"
                         align="center" />
        <el-table-column v-if="showColumns.name.show"
                         prop="name"
                         label="名称"
                         sortable="custom"
                         align="center" />
        <el-table-column v-if="showColumns.databaseType.show"
                         prop="databaseType"
                         label="类型"
                         sortable="custom"
                         align="center" />
        <el-table-column v-if="showColumns.username.show"
                         prop="username"
                         label="用户名"
                         sortable="custom"
                         align="center" />
        <el-table-column v-if="showColumns.ipPort.show"
                         prop="ipPort"
                         label="IP和端口"
                         sortable="custom"
                         align="center" />
        <el-table-column v-if="showColumns.otherParams.show"
                         prop="otherParams"
                         label="其他参数"
                         sortable="custom"
                         header-align="center" />
        <el-table-column v-if="showColumns.createTime.show"
                         prop="createTime"
                         label="创建时间"
                         sortable="custom"
                         align="center"
                         min-width="180"
                         :formatter="dateFormat" />
        <el-table-column v-if="showColumns.remarks.show"
                         prop="remarks"
                         label="备注" />
        <el-table-column v-if="$hasPermission(mixinViewModuleOptions.updateUrl) || $hasPermission(mixinViewModuleOptions.deleteUrl)"
                         label="操作"
                         fixed="right"
                         align="center"
                         min-width="180">
          <template slot-scope="scope">
            <el-button v-if="$hasPermission(mixinViewModuleOptions.updateUrl)"
                       type="warning"
                       @click="initDialog('addUpdateDialogRef',scope.row)"
                       size="mini">修改</el-button>
            <el-button v-if="$hasPermission(mixinViewModuleOptions.deleteUrl)"
                       type="danger"
                       @click="deleteHandle(scope.row,scope.row.username)"
                       size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 新增修改弹框 -->
      <AddUpdateForm ref="addUpdateDialogRef"
                     :addUrl="mixinViewModuleOptions.addUrl"
                     :updateUrl="mixinViewModuleOptions.updateUrl"
                     :getDataList="getDataList" />
      <!-- 代码生成弹框 -->
      <GeneratorCodeFrom ref="generatorCodeFromRef"
                         :generatorCodeUrl="generatorCodeUrl" />
    </div>
    <!-- 右边信息-end -->
  </zero-container>
</template>

<script>
import mixinViewModule from '@/mixins/view-module' // 分页相关js
import AddUpdateForm from './components/AddUpdateForm' // 添加修改模块
import GeneratorCodeFrom from './components/GeneratorCodeFrom' // 添加修改模块
export default {
  name: 'DatabaseInfo',
  mixins: [mixinViewModule],
  components: {
    AddUpdateForm,
    GeneratorCodeFrom
  },
  data () {
    return {
      mixinViewModuleOptions: {
        isPage: false, // 不分页
        getDataListUrl: '/databaseInfo/list',
        addUrl: '/databaseInfo/add',
        updateUrl: '/databaseInfo/update',
        deleteUrl: '/databaseInfo/del',
        exportUrl: '/databaseInfo/export'
      },
      generatorCodeUrl: '/databaseInfo/generatorCode',
      showColumns: {
        name: { label: '名称', show: true },
        databaseType: { label: '类型', show: true },
        username: { label: '用户名', show: true },
        ipPort: { label: 'IP和端口', show: true },
        otherParams: { label: '其他参数', show: true },
        createTime: { label: '创建时间', show: true },
        remarks: { label: '备注', show: true }
      }
    }
  }
}
</script>
